<!--
 * @Description:
 * @Date: 2024-06-25 21:24:10
 * @LastEditTime: 2024-09-20 09:44:59
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden w-100% h-100%">
    <view class="w-100% h-250rpx mineBg flex items-end px-40rpx py-100rpx">
      <view class="flex items-center">
        <img class="w-150rpx h-150rpx border-rd-50%" :src="avatar ? baseUrl + avatar : avatarImg" />
        <view class="text-#fff ml-40rpx text-38rpx font-bold">
          {{ showName }}
        </view>
        <view class="ml-30rpx">
          <view
            class="bg-#ECB305 py-8rpx px-40rpx color-#fff border-rd-10rpx"
            v-if="isLogined == 2"
          >
            {{ residents[residentType] }}
          </view>
        </view>
      </view>
    </view>
    <view class="mb-200rpx">
      <view
        class="px-40rpx py-30rpx flex items-center justify-between border-b-solid border-b-2rpx border-#F0F0F0"
        @click="handleSkip('/pages/VillageCondition/myVillageCondition')"
        v-if="residentType != 'tourist'"
      >
        <view class="flex items-center">
          <img class="w-60rpx h-60rpx" src="../../static/images/menu1.png" />
          <text class="font-bold ml-20rpx">我上报的村情</text>
        </view>
        <wd-icon name="arrow-right" size="22px" color="#A7A7A7"></wd-icon>
      </view>
      <view
        class="px-40rpx py-30rpx flex items-center justify-between border-b-solid border-b-2rpx border-#F0F0F0"
        @click="handleSkip('/pages/FruitMarket/myProducts')"
      >
        <view class="flex items-center">
          <img class="w-48rpx h-48rpx p-6rpx" src="../../static/images/menu3.png" />
          <text class="font-bold ml-20rpx">我发布的</text>
        </view>
        <wd-icon name="arrow-right" size="22px" color="#A7A7A7"></wd-icon>
      </view>
      <!-- <view
        class="px-40rpx py-30rpx flex items-center justify-between border-b-solid border-b-2rpx border-#F0F0F0"
      >
        <view class="flex items-center">
          <img class="w-50rpx h-50rpx" src="../../static/images/menu2.png" />
          <text class="font-bold ml-20rpx">转发小程序</text>
        </view>
        <wd-icon name="arrow-right" size="22px" color="#A7A7A7"></wd-icon>
      </view> -->
    </view>
    <view class="w-100% h-120rpx px-80rpx box-border" v-if="!accessToken && !isLogined">
      <wd-button block @click="goLogin('/pages/Login/index')">点击登录</wd-button>
    </view>
    <view class="w-100% h-120rpx px-80rpx box-border" v-if="isLogined == 3">
      <wd-button block @click="registration">重新注册</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'
import avatarImg from '@/static/images/avatar.png'
import {
  getResidentRecord,
  getGridMember,
  deleteGridMember,
  deleteResidentRecord,
} from '@/service/mine/index'
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
const baseUrl = import.meta.env.VITE_SERVER_BASEURL
const avatar = ref(null)
const toast = useToast()
const userStore = useUserStore()
defineOptions({
  name: 'Home',
})
const residents = {
  villager: '村民',
  cadre: '干部',
  tourist: '游客',
}
const showName = ref('未登录')
const auditStatus = ref(null)
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const handleSkip = (url) => {
  uni.navigateTo({ url })
}
const goLogin = (url) => {
  uni.reLaunch({ url })
}
const residentId = computed(() => userStore.userInfo.residentId)
const phone = computed(() => userStore.userInfo.phone)
const residentType = computed(() => userStore.userInfo.type)
const gridMemberId = computed(() => userStore.userInfo.gridMemberId)
const accessToken = computed(() => userStore.userInfo.accessToken)
const isLogined = computed(() => userStore.userInfo.isLogined)
const stateTypeObj = {
  1: '待审核',
  2: '审核通过',
  3: '审核驳回',
}

// 测试 uni API 自动引入
onShow(() => {
  initData()
})
onLoad(() => {})
async function initData() {
  // 判断当前用户是那个类型
  try {
    let residentName
    let avatarImg

    if (residentType.value === 'tourist') {
      showName.value = '游客' + phone.value.slice(-4)
      return
    }
    if (residentType.value === 'cadre') {
      const GridNumber = await getGridMember(gridMemberId.value)
      auditStatus.value = (GridNumber.data as any).auditStatus
      residentName = (GridNumber.data as any).memberName
      avatarImg = (GridNumber.data as any).photo
    } else if (residentType.value === 'villager') {
      const ResidentRecord = await getResidentRecord(residentId.value)
      auditStatus.value = (ResidentRecord.data as any).auditStatus
      residentName = (ResidentRecord.data as any).residentName
      avatarImg = (ResidentRecord.data as any).photo
    }
    if (auditStatus.value === 2) {
      showName.value = residentName
      avatar.value = avatarImg
      if (!accessToken.value) {
        toast.success({
          msg: '审核通过请重新登录！',
        })
        setTimeout(() => {
          uni.reLaunch({ url: '/pages/Login/index' })
          toast.close()
        }, 2000)
      }
    } else if (auditStatus.value != null) {
      showName.value = stateTypeObj[auditStatus.value]
    }
  } catch (err) {
    userStore.clearUserInfo()
    showName.value = '未登录'
  }
}
async function registration(id) {
  if (residentType.value === 'cadre') {
    await deleteGridMember(gridMemberId.value)
  } else {
    await deleteResidentRecord(residentId.value)
  }
  handleSkip('/pages/Login/index')
}
</script>

<style>
.mineBg {
  background: url('../../static/images/mineBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
::v-deep .wd-button {
  height: 100rpx !important;
  font-size: 34rpx !important;
  font-weight: bold !important;
  background: #029669 !important;
}
</style>
